<template>
	<div class="body">
		<div class="nav">
			<div class="nav_name">书城管理系统</div>
			<div class="nav_time">欢迎进入电影管理系统网站 登录时间:{{time}}</div>
			<div class="nav_avatar">
				<div><img :src="`http://127.0.0.1/api/public/showimg/${user.pic}`" /> </div>
				<div>
					<el-row class="block-col-2">
						<el-col :span="12">
							<el-dropdown trigger="click">
								<span class="el-dropdown-link">
									<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item icon="el-icon-plus">退出登录</el-dropdown-item>
									<el-dropdown-item icon="el-icon-circle-plus">切换账号</el-dropdown-item>
									<el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
									<el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
									<el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</el-col>
					</el-row>
				</div>
				<div>首页</div>
			</div>
		</div>
		<div style="display: flex;">
		<div class="Option">
			<el-row class="tac">
				<el-col :span="12">
					<h5>自定义颜色</h5>
					<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
						background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
						<el-submenu index="1">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span @click="name('热点图片')">热点图片</span>
							</template>
							<el-menu-item index="1-1" @click="name2('热点图片')"><router-link to="/adm/hotPic">热点图片</router-link> </el-menu-item>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span @click="name('类型管理')">类型管理</span>
							</template>
							<el-menu-item index="2-1" @click="name2('一级类型')"><router-link to="/adm/firsttype">一级类型</router-link></el-menu-item>
							<el-menu-item index="2-2" @click="name2('二级类型')"><router-link to="/adm/secondtype">二级类型</router-link></el-menu-item>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span @click="name('商品管理')">商品管理</span>
							</template>
							<el-menu-item index="3-1" @click="name2('商品列表')"> <router-link to="/adm/allgoods">商品列表</router-link> </el-menu-item>
						</el-submenu>
						<el-submenu index="4">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span @click="name('订单管理')">订单管理</span>
							</template>
							<el-menu-item index="4-1" @click="name2('订单详情')"><router-link to="/adm/orders">订单详情</router-link> </el-menu-item>
						</el-submenu>

					</el-menu>
				</el-col>
			</el-row>
		</div>
		<div class="view">
			<div class="OptionNam">
				{{OptionName}}--{{OptionName2}}
				<hr style="width: 100%;"/>
			</div>
			<div class="view2">
				<router-view></router-view>
			</div>
			
		</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'adm',
		data() {
			return {
				OptionName: '',
				OptionName2: '',
				time: '',
				user: {},
			}
		},
		methods: {
			name(n) {
				this.OptionName = n;
			},
			name2(n) {
				this.OptionName2 = n;
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			getUser() {
				this.$get("/api/user/info")
					.then((resp) => {
						this.user = resp.data.data
						console.log(resp.data.data);
					})
			}
		},
		mounted() {
			this.getUser();
			this.time = window.localStorage.getItem('time');
		}
	}
</script>

<style>
	.OptionNam {
		margin-left: 5%;
	}
	.view2{
		margin-left: 5%;
	}
	.view{
		width: 100%;
	}
	.OptionNam{
		width: 100%;
	}
	* {
		margin: 0px;
		padding: 0;
	}

	.tac {
		width: 100%;
	}

	.Option {
		width: 20%;
		height: 900px;
		background-color: #515961;
	}

	.body {
		width: 100%;
	}

	.nav {
		padding: 10px;

		width: 100%;
		background-color: #23262e;
	}

	.nav_name {
		color: #008000;
		width: 20%;
	}

	.nav_time {
		border-bottom: #008000 solid 3px;
		color: white;
	}

	.nav_avatar {
		margin-left: 50%;
		display: flex;
		color: white;
	}

	.nav_avatar img {
		width: 40px;
		border-radius: 50%;
	}

	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.demonstration {
		display: block;
		color: #8492a6;
		font-size: 14px;
		margin-bottom: 20px;
	}
</style>
